import React from "react";
import "./App.scss";
import Mock from "mockjs";
import axios from "axios";
import ListItem from "./components/listItem";

// Mock.mock('/tab', {
//   "tab|20-50": [
//     {
//       title: "@ctitle(2)",
//       id: "@id",
//       "children|10-20": [
//         {
//           image: "@image(100x100, @color, image)",
//           word: "@cword(2, 3)",
//           id: "@id",
//         },
//       ],
//     },
//   ],
// });

class App extends React.Component {
  state = {
    tab: [],
    index: 0,
  };
  async getTab() {
    const resp = await axios.get("/api/tab");
    this.setState({
      tab: resp.data.data,
    });
  }
  handleClick(i) {
    this.setState({
      index: i,
    });
  }
  render() {
    const { tab, index } = this.state;
    return (
      <div className="classify">
        <ul className="left">
          {tab.map((v, i) => {
            return (
              <li
                key={i}
                className={index === i ? "active" : ""}
                onClick={() => this.handleClick(i)}
              >
                {v.title}
              </li>
            );
          })}
        </ul>
        <div className="right">
          <div className="right-content">
            {tab.length > 0 &&
              tab[index].children.map((v, i) => {
                return <ListItem key={i} image={v.image} title={v.word}></ListItem>;
              })}
          </div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.getTab();
  }
}

export default App;
